<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel='stylesheet' href='stylesheets/style.css' />
    <link rel="stylesheet" type="text/css" href="stylesheets/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/themes/icon.css">
    <script type="text/javascript" src="/javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="/javascripts/jquery.easyui.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
    <title>Document</title>
    <style>
    body {
        padding: 0;
        margin: 0;
    }
    </style>
</head>

<body>
    <!-- <button data-type='1' class="news">杂乱新闻</button>
    <button data-type='2' class="news">国际新闻</button>
    <button data-type='3' class="news">军事新闻</button> -->
    <ul id="tt">
        <div id="mm" class="easyui-menu" style="width:120px;">
            <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
            <div onclick="update()">update</div>
            <div class="menu-sep"></div>
            <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
            <div onclick="details()" data-options="iconCls:'icon-search'">查询</div>
        </div>
    </ul>
    <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:'true'" style="width:400px;height:195px;padding:10px" type='1'>
        <form id="ff" method="get">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%">
            </div>
           <!--  <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="type" style="width:100%" data-options="label:'Type:',required:true">
            </div> -->
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="text" style="width:100%" data-options="label:'Text:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="parentId" style="width:100%">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="margin: 4px;" onclick="appendParent()">添加分类</a>
    <script>
    // function render(type) {
    //     type = type||$('#dlg').attr('type');
    //     $('#dg').datagrid({

    //         url: 'http://localhost:3000/news/list/' + type,
    //         pagination: true,
    //         columns: [
    //             [
    //                 { field: 'title', title: 'Title', width: 200 },
    //                 { field: 'content', title: 'Content', width: 400 },
    //                 {
    //                     field: '_id',
    //                     title: '操作',
    //                     width: 140,
    //                     formatter: function(value, row, index) {
    //                         return '<a href="#" onclick="deleteRow(\'' + value + '\')">删除</a>  <a href="#" onclick="editRow(\'' + value + '\')">修改</a> <a href="#" onclick="watch(\'' + value + '\')">查看评论</a>'
    //                     }
    //                 }
    //             ]
    //         ],
    //         toolbar: [{
    //             text: 'Add',
    //             iconCls: 'icon-add',
    //             handler: function() {
    //                 $('#dlg').dialog('open');
    //                 $('#ff').form('clear');
    //                 $('#dlg').attr('type', type);
    //             }
    //         }, {
    //             text: 'Cut',
    //             iconCls: 'icon-cut',
    //             handler: function() { alert('cut') }
    //         }, '-', {
    //             text: 'Save',
    //             iconCls: 'icon-save',
    //             handler: function() { alert('save') }
    //         }]
    //     });
    // };
    // render();

    // $('.news').click(function() {
    //     render($(this).data('type'));
    //     console.log($(this).data('type'))
    //     $('#dlg').attr('type',$(this).data('type'))
    // });

    // function deleteRow(id) {
    //     $.messager.confirm('delete the warning', 'Are you confirm delete this?', function(r) {
    //         if (r) {
    //             $.ajax({
    //                 url: 'http://localhost:3000/news/data/' + id,
    //                 method: 'delete'
    //             }).done(function() {
    //                 $('#dg').datagrid('reload');
    //             })
    //         }
    //     });

    // }

    // function editRow(id) {
    //     $.ajax({
    //         url: 'http://localhost:3000/news/data/' + id,
    //         method: 'get'
    //     }).done(function(res) {
    //         console.log(res);
    //         $('#dlg').dialog('open')
    //         $('#ff').form('load', res);
    //     })

    // }

    // function submitForm() {
    //     $('#ff').form('submit', {
    //         onSubmit: function() {
    //             var formData = $('#ff').serializeJSON();
    //             if ($(this).form('enableValidation').form('validate')) {
    //                 if (formData._id.trim().length > 0) {
    //                     formData.type = $('#dlg').attr('type');
    //                     $.ajax({
    //                         url: 'http://localhost:3000/news/data/' + formData._id,
    //                         method: 'put',
    //                         data: formData
    //                     }).done(function() {
    //                         $('#dg').datagrid('reload');
    //                         $('#dlg').dialog('close')
    //                     })
    //                 } else {
    //                     delete formData._id;
    //                     formData.type = $('#dlg').attr('type');

    //                     console.log($('#ff').serializeJSON())
    //                     $.ajax({
    //                         url: 'http://localhost:3000/news/data',
    //                         method: 'post',
    //                         data: formData
    //                     }).done(function() {
    //                         $('#dg').datagrid('reload');
    //                         $('#dlg').dialog('close')
    //                     })
    //                 }
    //             } else {


    //             }


    //         }
    //     });
    // }

    // function clearForm() {
    //     $('#ff').form('clear');
    // }

    //     $('#ss').searchbox({
    //     searcher:function(value,name){
    //         type = $('#dlg').attr('type');
    //         console.log(type)
    //         $('#dg').datagrid({

    //             url: 'http://localhost:3000/news/list/' + type + '/' + value,
    //             pagination: true,
    //             columns: [
    //                 [
    //                     { field: 'title', title: 'Title', width: 200 },
    //                     { field: 'content', title: 'Content', width: 400 },
    //                     {
    //                         field: '_id',
    //                         title: '操作',
    //                         width: 140,
    //                         formatter: function(value, row, index) {
    //                             return '<a href="#" onclick="deleteRow(\'' + value + '\')">删除</a>  <a href="#" onclick="editRow(\'' + value + '\')">修改</a> <a href="#" onclick="watch(\'' + value + '\')">查看评论</a>'
    //                         }
    //                     }
    //                 ]
    //             ],
    //             toolbar: [{
    //                 text: 'Add',
    //                 iconCls: 'icon-add',
    //                 handler: function() {
    //                     $('#dlg').dialog('open');
    //                     $('#ff').form('clear');
    //                     $('#dlg').attr('type', type);
    //                 }
    //             }, {
    //                 text: 'Cut',
    //                 iconCls: 'icon-cut',
    //                 handler: function() { alert('cut') }
    //             }, '-', {
    //                 text: 'Save',
    //                 iconCls: 'icon-save',
    //                 handler: function() { alert('save') }
    //             }]
    //         });
    //     },
    //     prompt:'Please Input Value'
    // });


     </script>
     <script>
        

         $('#tt').tree({

            url: 'http://localhost:3000/news/list/3/',
            onClick: function(node) {
                // console.log(node._id)
            },
            onContextMenu: function(e, node) {
                e.preventDefault();
                // console.log(node);
                 $(this).tree('select',node.target);
                $('#mm').menu('show',{
                    left: e.pageX,
                    top: e.pageY
                });
            }
        })

         function details(){
           
             var node = $('#tt').tree('getSelected');
            //   $('body').html(`<h2>${node.text}</h2><p>${node.content}</p>`);
            if(node.content==undefined){
                node.content=''
            }
            var str='';
            $.ajax({
                url:'http://localhost:3000/comment/list/'+node._id,
                method:'post'
            }).done((e)=>{
                console.log(e.rows)
                $.each(e.rows,function(index, el) {
                str+='<div>'+el.comment+'</div>';
                });
                console.log(str)
                parent.$('#tt').tabs('add',{    
                title: '新闻详情',
                content:`<form method='post' action='http://localhost:3000/comment/data/${node._id}/${node.text}'><h2 name='title'>${node.text}</h2><p>${node.content}</p>
                <div><h4>新闻评论</h4>${str}
                    <textarea name='comment'></textarea><br><button>提交</button>
                </div></form>
                `
                })
            })
            
         };


function update() {
         var id = $('#tt').tree('getSelected')._id;
        $.ajax({
            url: 'http://localhost:3000/news/data/' + id,
            method: 'get'
        }).done(function(res) {
            console.log(res)
            $('#dlg').dialog('open');
            $('#ff').form('load', res);

        })

    }

    function remove(){
        var node = $('#tt').tree('getSelected');
            $('#tt').tree('remove', node.target);
            console.log(node);
    }

    function append() {
         var id = $('#tt').tree('getSelected')._id;
        $('#ff').form('clear');

        $.ajax({
            url: 'http://localhost:3000/news/data/' + id,
            method: 'get'
        }).done(function(res) {
            console.log(res)
            $('#dlg').dialog('open')
            $('#ff').form('load', {
                parentId: res._id
            });

        })
    }

    function appendParent() {
        $('#ff').form('clear');

        $('#dlg').dialog('open')
    }


   function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                var formData = $('#ff').serializeJSON();
                if ($(this).form('enableValidation').form('validate')) {
                    if (formData._id.trim().length > 0) {
                        console.log('上面')
                        if(formData.parentId==''){
                            delete formData.parentId;
                            console.log('zhixinguole')
                        }
                        $.ajax({
                            url: 'http://localhost:3000/news/data/' + formData._id,
                            method: 'put',
                            data: formData
                        }).done(function() {
                            $('#tt').tree('reload');

                            $('#dlg').dialog('close')
                        })
                    } else {
                        console.log(formData)
                        delete formData._id;
                        formData.type=3;
                        if(formData.parentId==''){
                            delete formData.parentId;
                            console.log('zhixinguole')
                        }
                        // delete formData.parentId;
                        // console.log($('#ff').serializeJSON())
                        console.log('下面')
                        $.ajax({
                            url: 'http://localhost:3000/news/data',
                            method: 'post',
                            data: formData
                        }).done(function() {
                            $('#tt').tree('reload');
                            $('#dlg').dialog('close');
                        })
                    }
                } else {


                }


            }
        });
    }

    function clearForm() {
        $('#ff').form('clear');
    }


    </script>
</body>

</html>